<div class="col-md-12">
	<div class="panel panel-primary">
		<header class="panel-heading">
			<div class="row">
				<div class="col-md-12"><span>主机房迁移事件记录</span></div>
			</div>
		</header>

		<div class="row well-sm">
			<div class="col-md-3">
				<div class="input-group">
					<input type="text" class="form-control" ng-model="clusterName" placeholder="search by cluster name" />
					<div class="input-group-btn">
						<button type="button" class="btn btn-default no-border btn-sm" ng-click="onClusterChange()">
							<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						</button>
					</div>
				</div>
			</div>
			<div class="col-md-2">
				<div class="input-group">
					<input type="text" class="form-control" ng-model="operator" placeholder="search by operator" />
					<div class="input-group-btn">
						<button type="button" class="btn btn-default no-border btn-sm" ng-click="onOperatorChange()">
							<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						</button>
					</div>
				</div>
			</div>
			<div class="col-md-2">
				<dynamic-string-value-select title="MigrationStatus" [values]="types" [(value)]="type" (selected)="onStatusChange($event)"></dynamic-string-value-select>
			</div>
			<div class="col-md-2">
				<div class="checkbox">
					<label>
						<input ng-model="filterTestCluster" type="checkbox" class="ace" ng-change="onTestFilterChanged()" />
						<span class="lbl">过滤测试集群</span>
					</label>
				</div>
			</div>
		</div>

		<table ng-table="tableParams" class="table table-striped table-hover">
			<tr ng-repeat-start="item in $data">
				<td data-title="'id'">{{item.event.id}}</td>
				<td data-title="'详情'">
					<div class="action-buttons">
						<a href="javascript:void(0)" class="green bigger-140 show-details-btn"
						   title="Show Details" ng-click="item.showDetail = !item.showDetail">
							<i ng-show="!item.showDetail" class="ace-icon fa fa-angle-double-down blue"></i>
							<i ng-show="item.showDetail" class="ace-icon fa fa-angle-double-up blue"></i>
						</a>
					</div>
				</td>
				<td data-title="'开始时间'">{{item.event.startTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
				<td data-title="'操作人'">{{item.event.operator}}</td>
				<td data-title="'涉及集群'" ng-style="clusterBlock">
					<span ng-repeat="cluster in item.clusters">
						<span ng-if="$index != 0">&nbsp;|&nbsp;</span>
						{{cluster}}
					</span>
				</td>
				<td data-title="'状态'">{{item.status}}</td>
				<td data-title="'操作入口'">
					<a type="button" class="btn btn-primary btn-sm" href="/#/migration_event_details/{{item.event.id}}">详情</a>
					&nbsp&nbsp&nbsp
					<!-- <a type="button" class="btn btn-danger btn-sm" href="">取消迁移</a> -->
				</td>
			</tr>
			<tr ng-repeat-end ng-show="item.showDetail">
				<td colspan="6" class="text-left">
					<ul class="list-unstyled spaced">
						<li ng-repeat="cluster in item.clusters">
							<i class="ace-icon fa fa-caret-right blue"></i>
							{{cluster}}
						</li>
					</ul>
				</td>
			</tr>
		</table>
	</div>
</div>

<a href="#" id="btn-scroll-up"
	class="btn-scroll-up btn btn-sm btn-inverse"> <i
	class="icon-double-angle-up icon-only bigger-110"></i>
</a>